<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-19 20:32:48
 * @LastEditors: charles
 * @LastEditTime: 2021-10-21 17:15:21
-->
<template>
  <div class="statistics">
    <!-- 第一行 -->
    <div class="box_1">
      <div class="box_info">
        <div class="title">总订单数</div>
        <div class="val">
          <span>{{nums.order_nums}}</span>
          <span class="unit">个</span>
        </div>
      </div>
      <div class="box_info">
        <div class="title">活跃店铺数量</div>
        <div class="val">
          <span>{{nums.shop_nums}}</span>
          <span class="unit">个</span>
        </div>
      </div>
      <div class="box_info">
        <div class="title">活跃超市数量</div>
        <div class="val">
          <span>{{nums.market_nums}}</span>
          <span class="unit">个</span>
        </div>
      </div>
      <div class="box_info">
        <div class="title">本月新增订单</div>
        <div class="val">
          <span>{{nums.order_current_nums}}</span>
          <span class="unit">个</span>
        </div>
      </div>
      <div class="box_info">
        <div class="title">本年新增订单</div>
        <div class="val">
          <span>{{nums.order_nums - 2}}</span>
          <span class="unit">个</span>
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="box_2">
      <div class="left">
        <C21></C21>
      </div>
      <div class="right">
        <div class="line">
          <C221></C221>
        </div>
        <div class="pies">
          <div><C222></C222></div>
          <div><C223></C223></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from '@/utils/request'
import C21 from './components/C21.vue'
import C221 from './components/C221.vue'
import C222 from './components/C222.vue'
import C223 from './components/C223.vue'
export default {
  components:{
    C21,
    C221,
    C222,
    C223
  },
  data(){
    return {
      nums:{}
    }
  },
  mounted(){
    this.loadNums();
  },
  methods:{
    loadNums(){
      let url = "/statistics/nums"
      get(url).then(resp=>{
        this.nums = resp.data;
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.statistics {
  .box_info {
    box-sizing: border-box;
    padding: 1em;
    color: #fff;
    .title {
      line-height: 3em;
      font-size: 18px;
      font-weight: bold;
    }
    .val {
      font-size: 14px;
      text-align: right;
    }
  }
  .box_1 {
    display: flex;
    margin-bottom: .5em;
    & > div {
      flex:1;
      height: 120px;
      margin-right: .5em;
      background: lightblue;
    }
    & > div:nth-child(1){
      background-color: #fdc660;
    }
    & > div:nth-child(2){
      background-color: #fda065;
    }
    & > div:nth-child(3){
      background-color: #f86b66;
    }
    & > div:nth-child(4){
      background-color: #e6003b;
    }
    & > div:nth-child(5){
      background-color: #8774f2;
    }
  }
  // 第二行
  .box_2 {
    display: flex;
    margin-bottom: .5em;
    height: 400px;
    & > div {
       margin-right: .5em;
    }
    .left {
      flex: 2;
    }
    .right {
      flex:3;
      display: flex;
      flex-direction: column;
      & > div {
        flex:1
      }
      .pies {
        display: flex;
        & > div {
          flex:1;
          padding:.5em
        }
      }
    }
  }
  // .box_3 {
  //   display: flex;
  //   & > div {
  //     flex:1;
  //     height: 120px;
  //     margin-right: .5em;
  //     background: lightblue;
  //   }
  //    & > div:nth-child(1){
  //     background-color: #58e0ad;
  //   }
  //   & > div:nth-child(2){
  //     background-color: #52bdc3;
  //   }
  //   & > div:nth-child(3){
  //     background-color: #51b6fe;
  //   }
  //   & > div:nth-child(4){
  //     background-color: #2e82f3;
  //   }
  //   & > div:nth-child(5){
  //     background-color: #3342b5;
  //   }
  // }
}
</style>